<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>公告管理</title>
    <meta name="description" content="公告管理">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"
          th:href="@{/static/css/bootstrap.min.css(v='3.3.6') }">
    <link href="../../static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"
          th:href="@{/static/css/font-awesome.min.css(v='4.4.0') }">
    <link rel="stylesheet" href="../../static/css/animate.css" th:href="@{/static/css/animate.css}">
    <link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"
          th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css}">
    <link href="../../static/css/style.css" rel="stylesheet" th:href="@{/static/css/style.css}">
    <!--时间控件-->
    <link href="../../static/css/plugins/datapicker/datepicker3.css"
          th:href="@{../../static/css/plugins/datapicker/datepicker3.css}" rel="stylesheet">
    <link rel="stylesheet" href="../../static/css/plugins/sweetalert/sweetalert.css"
          th:href="@{/static/css/plugins/sweetalert/sweetalert.css}">

    <style type="text/css">
        .table>thead>tr>th{
            color: #2a62bc;
        }
        .form-inline>.btn:not(.query){
            margin-left: 0.8%;
            float: right;
        }
    </style>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
        <div>
            <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-default" data-target="#addMyIssue" data-toggle="modal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true" id="add"></span>新增
                </button>
                <button  type="button" class="btn btn-info" id="clickIssue">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>发布
                </button>
                <button id="deleteAll" type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>删除
                </button>
            </div>
            <table class="table table-bordered table-hover table-striped" id="tb_departments">
                <!-- 表格内容 -->
            </table>
        </div>
    </div>


<!--新增的弹窗-->
<div class="modal fade" tabindex="-1" role="dialog" id="addMyIssue">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addMyModalLabel">新增公告标题</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-3 control-label"  style="left: -45px;">公告标题:</label>
                        <div class="col-sm-6 date" style="left: -45px">
                            <input type="text" name="addNoticeTitle" id="addTitle" class="form-control" placeholder="请输入公告标题">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="left: -37px;">发布人：</label>
                        <div class="col-sm-6" style="left: -45px;">
                            <input type="text" name="addNoticeIssuer" id="addIssuer" class="form-control" value="${noticeAddIssuer}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-3 control-label" style="left: -35px;">起止时间：</label>
                        <div class="col-sm-6" style="left: -45px">
                            <input type="text" name="addNoticeStartTime" class="form-control" id="addIssueTime" value="${noticeAddTime}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="left: -35px;">公告内容：</label>
                        <div class="col-sm-7" style="left: -45px">
                            <textarea cols="80" rows="7" name="addNoticeContent" class="form-control" id="addIssueContent" value="${noticeAddContent}"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveIssue">保存</button>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--编辑的弹窗-->
<div class="modal fade" tabindex="-1" role="dialog" id="myEdit">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">公告标题:</label>
                        <div class="col-sm-6">
                            <input type="text" id="editIssueTitle" name="editIssueTitle" class="form-control" value="${noticeEditTitle}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">发布人:</label>
                        <div class="col-sm-6">
                            <input type="text" id="editIssuer" class="form-control" name="editIssuer" title="${noticeEditIssuer}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >起止时间:</label>
                        <div class="col-sm-6">
                            <input type="text" id="editStartTime" class="form-control" name="editStartTime" title="${noticeEditTime}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">公告内容:</label>
                        <div class="col-sm-7">
                            <textarea cols="80" rows="7" id="editContent" class="form-control" name="editContent" title="${noticeEditContent}"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveEdit">保存</button>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script src="../../static/js/jquery.min.js"
        th:src="@{/static/js/jquery.min.js}"></script>
<script src="../../static/js/bootstrap.min.js"
        th:src="@{/static/js/bootstrap.min.js}"></script>
<!-- 时间控件 -->
<script src="../../static/js/plugins/datapicker/bootstrap-datepicker.js"
        th:src="@{../../static/js/plugins/datapicker/bootstrap-datepicker.js}"></script>
<script src="../../static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{../../static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>

<script>
    $(document).ready(function () {
        //删除多行记录的弹窗操作
        $("#deleteAll").click(function () {
            let rows = $("#tb_departments").bootstrapTable('getAllSelections');//获取要删除的数据
            if (rows.length == 0) {  //判断是否选中
                swal("至少选择一行","","error");
                return false;
            }
            let deleteData = [];
            for (let i=0;i<rows.length;i++) {
                deleteData.push(rows[i].userName);
            }
            console.log(deleteData.toString());
            // alert("删除行数："+deleteData.length);
            swal({
                title: "你确定要删除" + deleteData.length + "条记录吗?",
                text: "删除后将无法恢复，是否继续?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                closeOnConfirm: false,
            }, function () {
                //发送ajax请求
                deleteData = JSON.stringify(rows);
                alert(deleteData);
                /*$.ajax({
                   url:appName,
                   method:"post",
                   data:deleteData,
                   dataType:"text",
                   async:"true",
                   contentType:"application/json",
                    success:function (data) {
                        alert(deleteData);
                        swal("删除成功", "您已经永久删除了这条信息。", "success");
                        // 重新加载本页面
                        window.location.reload();
                    },
                    error:function (jqXHP) {
                        console.log(jqXHP);
                        swal("删除失败", "您删除的信息有误，请重新删除!", "error");
                    }
                });*/
                //获取对象
                var ids = $.map(rows, function (row) {
                    return row.id
                });
                //根据Id字段删除对应的数据
                $('#tb_departments').bootstrapTable('remove', {field: 'id',values: ids });
                swal("删除成功", "您已经永久删除了这条信息。", "success");
            });
        });
    });//end of deleteAll
</script>

<script>
    $(function () {
        //下面的例子
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();
    });

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
                url: '../../static/js/demo/notice/notice.json',         //请求后台的URL（*）
                //method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [5, 10, 15, 20],        //可供选择的每页的行数（*）
                search:true,                        //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
                strictSearch:false,                 //查询时是否严格匹配, true表示严格匹配，false表示模糊匹配
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                uniqueId: "Id",                     //每一行的唯一标识，一般为主键列
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                columns: [{
                    checkbox: true
                }, {
                    field: 'Title',
                    title: '公告标题'
                }, {
                    field: 'Content',
                    title: '公告内容'
                }, {
                    field: 'Publisher',
                    title: '发布人'
                }, {
                    field: 'Time',
                    title: '起止时间'
                },{
                    title: '操作',
                    field: 'Id',
                    width:'110',
                    events:operateEvents,
                    formatter: function (value, row, index) {
                        var html = '<Button class="btn btn-white" title="编辑" type="button" ' + 'data-toggle="modal" data-target="#myEdit">' +
                            '<i class="glyphicon glyphicon-edit "></i></Button>';
                        html += '　<Button class="btn btn-white" id="deleteSelect" type="button" title="删除">' +
                            '<i class="glyphicon glyphicon-trash text-danger"></i></Button>';
                        return html;
                    }
                }]
            });
        };
        return oTableInit;
    };

    //发布模态框的开始、结束时间操作
    $("#startTime,#editStartTime,#addIssueTime").datepicker ({
        format: "yyyy-mm-dd hh:ii:ss",
        language: "zh-CN",
        clearBtn: true,//清除
        autoclose: true,
        todayHighlight: true,
        format: 'yyyy-mm-dd',
        todayBtn: false,//今日按钮
        startDate: '1970-1-1', //与你自己设置的格式一致yyyy-mm-dd，未设置的话与默认格式一致mm/dd/yyyy
        endDate: '2070-1-1'
    });//end of datepicker

    //点击发布事件
    $("#clickIssue").click(function () {
       // console.log("发布成功");
        alert("发布成功");
    });// end of clickIssue

    //单次删除的弹窗插件
    window.operateEvents = {
        'click button[title="删除"]': function (e, value, row, index) {
            swal({
                title: "您确定要删除这条数据吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                closeOnConfirm: false
            }, function () {
                alert(row.id);
                //发送ajax请求
                /*$.ajax(function () {
                    url:appName,
                    method:"post",
                    data: "",
                    dataType:"type",
                    async:true,
                    contentType:"application/json"
                    success:function(data) {
                        console.log(data);
                        //重新刷新页面
                        window.location.reload();
                    }
                    error:function(jqXHP){
                        console.log(jqXHP);
                    }
                });*/
                swal("删除成功！", "您已经永久删除了这条信息。", "success");
            });
        },//end of deleteSelect
        //点击编辑回显数据
        'click button[title="编辑"]':function (e, value, row, index) {
            // alert(JSON.stringify(row));
            $("#editIssueTitle").val(row.Title);//公告标题
            $("#editIssuer").val(row.Publisher);
            $("#editStartTime").val(row.Time);
            $("#editContent").val(row.Content);
        }
    };//end of 回显数据

    $('#saveEdit').click(function () {
        window.location.reload();
    });

    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件

        };

        return oInit;
    };

</script>

</body>
</html>